<!-- 首页-->
<template>
  <div>
    <!-- 头部栏 -->
    <div class="w-screen-calc" style="height: 100px;">
      <HeaderToolBar @submit-search="searchDetail"
                     @submit-reply="replyDetail"
                     @click-tag="tagDetail"
                     :search-loading="detailLoading"
                     :replay-btn-show="recordSearch.length > 1"/>
    </div>
    <!-- 页面内容 -->
    <div ref="indexContent" class="mt-7">
      <div class="grid w-screen-calc">
        <!-- 左侧内容-->
        <div class="col-2">
          <!-- 左侧内容-->
          <StickyPanel top="50px" :dom="indexContent">
            <template #content>
              <InfoCard>
                <template #content>
                  <EasyContentDivider text="推荐标签"/>
                  <ul class="m-left-menu">
                    <li>
                      <IconText text="Java" @click="menuClickHandler('Java')">
                        <template #svg>
                          <svg class="icon" viewBox="0 0 1024 1024" width="128" height="128">
                            <path
                                d="M558.08 472.064c48.128 53.248-13.312 103.424-13.312 103.424s119.808-61.44 65.536-139.264c-51.2-71.68-91.136-107.52 122.88-232.448 0 1.024-335.872 86.016-175.104 268.288"
                                fill="#FF0000"></path>
                            <path
                                d="M610.304 5.12s101.376 101.376-96.256 258.048C356.352 389.12 478.208 460.8 514.048 543.744 420.864 459.776 354.304 386.048 399.36 317.44 463.872 216.064 651.264 166.912 610.304 5.12"
                                fill="#FF0000"></path>
                            <path
                                d="M720.896 757.76c183.296-95.232 98.304-188.416 39.936-175.104-15.36 3.072-21.504 5.12-21.504 5.12s5.12-8.192 16.384-11.264c117.76-40.96 207.872 120.832-37.888 186.368-1.024 0 2.048-3.072 3.072-5.12m-337.92 38.912s-37.888 21.504 26.624 29.696c76.8 8.192 117.76 8.192 202.752-8.192 0 0 23.552 15.36 53.248 26.624-191.488 80.896-433.152-5.12-282.624-48.128m-23.552-106.496s-43.008 31.744 23.552 37.888c82.944 8.192 149.504 10.24 261.12-13.312 0 0 16.384 16.384 40.96 24.576-231.424 68.608-490.496 5.12-325.632-49.152"
                                fill="#6699FF"></path>
                            <path
                                d="M811.008 876.544s27.648 23.552-31.744 40.96c-111.616 34.816-460.8 45.056-558.08 2.048-34.816-15.36 31.744-35.84 51.2-40.96 21.504-5.12 34.816-3.072 34.816-3.072-38.912-28.672-251.904 52.224-107.52 75.776 390.144 62.464 712.704-28.672 611.328-74.752M400.384 578.56s-178.176 43.008-63.488 56.32c49.152 6.144 146.432 5.12 235.52-3.072 73.728-6.144 147.456-19.456 147.456-19.456s-26.624 11.264-45.056 24.576c-181.248 48.128-530.432 26.624-430.08-23.552 88.064-39.936 155.648-34.816 155.648-34.816"
                                fill="#6699FF"></path>
                            <path
                                d="M418.816 1015.808c176.128 11.264 446.464-6.144 453.632-90.112 0 0-13.312 31.744-146.432 56.32-150.528 27.648-336.896 24.576-446.464 6.144 2.048 1.024 24.576 20.48 139.264 27.648"
                                fill="#6699FF"></path>
                          </svg>
                        </template>
                      </IconText>
                    </li>
                    <li>
                      <IconText text="Vue" @click="menuClickHandler('Vue')">
                        <template #svg>
                          <svg class="icon" viewBox="0 0 1024 1024" width="128" height="128">
                            <path d="M615.6 123.6h165.5L512 589.7 242.9 123.6H63.5L512 900.4l448.5-776.9z"
                                  fill="#41B883"></path>
                            <path d="M781.1 123.6H615.6L512 303 408.4 123.6H242.9L512 589.7z" fill="#34495E"></path>
                          </svg>
                        </template>
                      </IconText>
                    </li>
                    <li>
                      <IconText text="SQL" @click="menuClickHandler('SQL')">
                        <template #svg>
                          <svg class="icon" viewBox="0 0 1024 1024" width="128" height="128">
                            <path
                                d="M856.368 169.2H577.76a24 24 0 0 0 0 48h278.608a45.968 45.968 0 0 1 45.92 45.92v557.216a45.968 45.968 0 0 1-45.92 45.92h-253.6a1524.576 1524.576 0 0 1-68.304-57.328 24 24 0 1 0-32.096 35.696c8.304 7.456 16.704 14.752 24.784 21.632H299.136a45.968 45.968 0 0 1-45.92-45.92v-41.76a24 24 0 0 0-48 0v41.76a94.032 94.032 0 0 0 93.92 93.92h557.232a94.032 94.032 0 0 0 93.92-93.92V263.088a94.048 94.048 0 0 0-93.92-93.888z"
                                fill="#666666"></path>
                            <path
                                d="M298.496 796.88a24 24 0 0 0 37.312-15.456 895.808 895.808 0 0 1 26.656-102.72 1102.672 1102.672 0 0 0 41.2 57.088 24 24 0 1 0 38-29.328 1078.192 1078.192 0 0 1-65.6-95.36 24 24 0 0 0-43.008 4.352c-1.024 2.816-20.272 56-34.48 112-27.088-39.632-57.504-121.008-6.544-259.984a24 24 0 0 0-6.016-25.696 341.856 341.856 0 0 1-78.8-120.336 233.216 233.216 0 0 0-42.288-76.064c-41.056-49.312-46.944-78.16-40.896-85.504 10.176-12.368 70.528 15.184 119.568 54.544a24 24 0 0 0 26 2.64c1.008-0.496 102.656-50.608 231.184 62.864a664.256 664.256 0 0 1 144.336 194.672 24.112 24.112 0 0 0 25.6 13.76c0.88-0.144 77.744-10.8 151.664 77.584-110.144 19.2-115.2 36.976-118.4 48a24 24 0 0 0 5.744 23.168c32.288 33.792 119.328 136.144 133.984 203.2a24 24 0 0 0 23.424 18.88 24.576 24.576 0 0 0 5.136-0.544 24 24 0 0 0 18.32-28.576c-15.472-70.752-87.888-160.368-124.72-202.416a921.184 921.184 0 0 1 102.72-20.448 24 24 0 0 0 16.608-36.96c-75.616-114.816-165.488-129.6-203.536-130.24a699.504 699.504 0 0 0-149.056-196.048C408.176 134.08 301.008 155.2 262.656 168.288 144.784 77.92 98.624 115.328 87.072 129.344c-26.8 32.48-12.992 81.856 41.04 146.752a185.744 185.744 0 0 1 33.6 60.496 377.6 377.6 0 0 0 80.144 128.768c-79.152 233.728 50.944 327.552 56.64 331.52z"
                                fill="#1771B9"></path>
                            <path
                                d="M290.048 282.288a24.528 24.528 0 0 0-6.896 16.96 24 24 0 0 0 6.896 16.96 24.128 24.128 0 0 0 34.064 0 24.096 24.096 0 0 0 6.88-16.96 24.512 24.512 0 0 0-6.88-16.96 24.944 24.944 0 0 0-34.064 0z"
                                fill="#1771B9"></path>
                            <path
                                d="M477.408 757.232a15.904 15.904 0 0 0-2.896-3.52 24.608 24.608 0 0 0-33.92 0 16.528 16.528 0 0 0-3.04 3.52 36.896 36.896 0 0 0-2.24 4.16c-0.48 1.44-0.944 3.04-1.264 4.48a24.464 24.464 0 0 0-0.496 4.8 24.992 24.992 0 0 0 1.76 9.12 26.336 26.336 0 0 0 5.28 7.84 22.4 22.4 0 0 0 7.68 5.12 23.008 23.008 0 0 0 9.28 1.92 24.256 24.256 0 0 0 16.96-7.04 22.704 22.704 0 0 0 5.12-7.84 22.208 22.208 0 0 0 1.92-9.12 21.92 21.92 0 0 0-1.92-9.28 20.8 20.8 0 0 0-2.224-4.16z"
                                fill="#666666"></path>
                          </svg>
                        </template>
                      </IconText>
                    </li>
                  </ul>
                  <EasyContentDivider text="应用板块"/>
                  <ul class="m-left-menu">
                    <li>
                      <IconText text="共享文档库" @click="menuClickRouterHandler('documentation')">
                        <template #svg>
                          <svg class="icon" viewBox="0 0 1024 1024" width="128" height="128">
                            <path
                                d="M363.576889 160.995556c60.871111 0 114.858667 29.468444 148.48 74.865777a184.149333 184.149333 0 0 1 146.545778-74.865777h252.416a7.964444 7.964444 0 0 1 7.964444 7.736888v612.124445a7.964444 7.964444 0 0 1-7.736889 7.964444H623.274667c-38.513778 0-70.257778 28.899556-74.752 66.104889l-0.113778 1.137778a8.817778 8.817778 0 0 1-8.817778 7.964444h-55.239111a8.760889 8.760889 0 0 1-8.704-7.623111l-0.056889-0.284444a75.264 75.264 0 0 0-73.671111-67.299556H112.981333a7.964444 7.964444 0 0 1-7.964444-7.736889V168.96a7.964444 7.964444 0 0 1 7.736889-7.964444h250.88z m0 72.021333h-186.595556V716.8h223.744c26.510222 0 51.370667 6.997333 72.817778 19.228444l0.853333 0.455112 1.592889 0.967111V343.381333a112.298667 112.298667 0 0 0-108.714666-110.364444h-3.697778z m483.441778 0h-186.595556c-61.44 0-111.388444 49.208889-112.412444 110.364444v394.126223l1.592889-0.967112c20.764444-11.946667 44.657778-19.057778 70.200888-19.683555H847.075556V233.016889z"
                                fill="#707070"></path>
                          </svg>
                        </template>
                      </IconText>
                    </li>
                    <li>
                      <IconText text="公共文件库" @click="menuClickRouterHandler('commonFile')">
                        <template #svg>
                          <svg class="icon" viewBox="0 0 1329 1024" width="128" height="128">
                            <path
                                d="M1036.572 951.784h-780.721c-62.416 0-113.411-47.899-115.072-107.38l-78.125-495.818v-2.735c0-60.873 51.662-110.396 115.164-110.396h14.961v-63.036c0-60.873 51.651-110.396 115.13-110.396h234.199c42.067 0 105.428 34.714 140.178 74.338h302.237c48.717 0 161.228 35.661 166.943 104.891 45.468 14.762 78.311 56.069 78.311 104.599v2.747l-78.137 495.807c-1.659 59.493-52.643 107.38-115.072 107.38zM136.887 343.559l78.008 495.070v2.747c0 21.109 18.374 38.279 40.957 38.279h780.721c22.582 0 40.957-17.17 40.957-38.279v-2.747l78.008-495.070c-1.274-20.046-19.146-35.989-40.932-35.989h-37.075v-59.903c-1.823-3.846-12.027-14.026-34.48-24.113-23.096-10.357-46.52-15.078-58.536-15.078h-341.532l-10.87-17.147c-17.953-28.368-70.714-57.191-90-57.191h-234.199c-22.593 0-40.968 17.182-40.968 38.279v135.152h-89.135c-21.775 0-39.647 15.942-40.921 36z"></path>
                            <path d="M100.875 306.542h1086.428v69.779h-1086.428z"></path>
                          </svg>
                        </template>
                      </IconText>
                    </li>
                    <li>
                      <IconText text="面经" @click="menuClickRouterHandler('interviews')">
                        <template #svg>
                          <svg class="icon" viewBox="0 0 1024 1024" p-id="6118" width="128" height="128">
                            <path d="M550.5 236.5l-421 230.3 378.2 199.1 443.5-266.3-379.1-163.1z" fill="#D1D2D4" p-id="6119"></path>
                            <path d="M557.5 198.1L121.1 439.6c-52.4 29-84.9 84.2-84.9 144.1 0 62.3 36.2 120.4 92.5 148l348.6 165.7c7.7 3.7 16 5.5 24.3 5.5 10 0 19.9-2.6 28.7-7.9l457.6-269.3V378.8L557.5 198.1z m3.4 63.9L897 403.1 504.4 634.8l-317.2-166L560.9 262z m-59 583.2L153.6 679.7c-36.4-17.8-59.9-55.6-59.9-96.1 0-31 13.5-59.8 36.1-79.9l347.9 182.1c8.3 4.3 17.3 6.5 26.3 6.5 9.9 0 19.8-2.6 28.7-7.9l397.5-234.1v142.3L501.9 845.2z" fill="" p-id="6120"></path>
                            <path d="M507.7 347.3L713 444.9l56.6-42.6-196.1-92.5z" fill="" p-id="6121"></path>
                          </svg>
                        </template>
                      </IconText>
                    </li>
                    <li>
                      <IconText text="意见反馈" @click="menuClickRouterHandler('feedback')">
                        <template #svg>
                          <svg class="icon" viewBox="0 0 1024 1024" width="128" height="128">
                            <path
                                d="M596.992 552.448 259.584 552.448c-16.384 0-29.184-13.312-29.184-29.184 0-16.384 13.312-29.184 29.184-29.184l336.896 0c16.384 0 29.184 13.312 29.184 29.184C626.176 539.136 612.864 552.448 596.992 552.448z"></path>
                            <path
                                d="M662.528 537.6c-4.096 0-8.192-1.024-11.776-2.56-14.848-6.656-21.504-24.064-14.848-38.4l168.448-381.952c6.656-14.848 24.064-21.504 38.4-14.848 14.848 6.656 21.504 24.064 14.848 38.4l-168.448 381.952C684.544 531.456 673.792 537.6 662.528 537.6z"></path>
                            <path
                                d="M753.152 698.88 259.584 698.88c-16.384 0-29.184-13.312-29.184-29.184s13.312-29.184 29.184-29.184l493.568 0c16.384 0 29.184 13.312 29.184 29.184S769.536 698.88 753.152 698.88z"></path>
                            <path
                                d="M786.432 926.72 226.816 926.72c-40.448 0-73.216-32.768-73.216-73.216L153.6 252.928C153.6 212.48 186.368 179.2 226.816 179.2l471.552 0c16.384 0 29.184 13.312 29.184 29.184s-13.312 29.184-29.184 29.184L226.816 237.568c-8.192 0-14.848 6.656-14.848 14.848l0 600.576c0 8.192 6.656 14.848 14.848 14.848l559.616 0c8.192 0 14.848-6.656 14.848-14.848L801.28 819.2c0-16.384 13.312-29.184 29.184-29.184s29.184 13.312 29.184 29.184l0 34.304C859.648 893.952 826.88 926.72 786.432 926.72z"></path>
                            <path
                                d="M830.464 882.688c-16.384 0-29.184-13.312-29.184-29.184L801.28 354.304c0-16.384 13.312-29.184 29.184-29.184s29.184 13.312 29.184 29.184l0 499.2C859.648 869.376 846.336 882.688 830.464 882.688z"></path>
                          </svg>
                        </template>
                      </IconText>
                    </li>
                    <li>
                      <IconText text="聊天室" @click="menuClickRouterHandler('chat')">
                        <template #svg>
                          <svg class="icon" viewBox="0 0 1344 1024" width="128" height="128">
                            <path
                                d="M1140.864 448.736c-8.448-2.624-17.408 1.984-20.096 10.4-2.656 8.416 1.984 17.408 10.4 20.096 125.056 39.84 180.832 99.264 180.832 192.768 0 83.168-75.872 147.712-121.056 178.816-4.352 3.008-6.944 7.904-6.944 13.184l0 122.336c-23.36-8.704-64.096-28.48-100.032-68.96-3.744-4.192-9.44-6.112-14.976-5.088-9.12 1.76-18.432 4.256-27.872 6.784-16.32 4.384-33.152 8.928-49.12 8.928-82.176 0-139.712-17.664-198.528-60.896-7.168-5.248-17.12-3.68-22.368 3.424-5.248 7.136-3.712 17.12 3.392 22.368 64.864 47.68 127.872 67.104 217.504 67.104 20.192 0 39.136-5.088 57.44-10.016 5.696-1.568 11.36-3.104 16.96-4.416 59.808 63.168 127.456 77.536 130.4 78.112 1.056 0.224 2.112 0.32 3.2 0.32 3.648 0 7.264-1.248 10.112-3.616 3.744-3.04 5.888-7.584 5.888-12.384l0-135.648c82.624-58.912 128-129.824 128-200.352 0-108.192-64.544-179.136-203.136-223.264zM1056 432c0-246.272-224.576-432-522.336-432-299.264 0-533.664 189.792-533.664 432.064 0 145.248 102.752 249.312 192 312.288l0 212.352c0 5.44 2.752 10.464 7.296 13.44 2.656 1.696 5.664 2.56 8.704 2.56 2.208 0 4.448-0.48 6.56-1.408 4.672-2.08 113.888-51.712 207.328-153.888 40.48 7.52 86.272 14.752 127.808 14.752 302.816 0 506.304-160.832 506.304-400.16zM549.664 800.16c-41.92 0-89.568-8.032-130.656-15.872-5.536-0.992-11.232 0.896-14.976 5.088-65.6 73.984-142.688 120.992-180.032 141.248l0-194.624c0-5.28-2.592-10.176-6.944-13.184-84.416-58.08-185.056-155.616-185.056-290.752 0-224.352 220.352-400.064 501.664-400.064 279.552 0 490.336 171.968 490.336 400 0 220.224-190.624 368.16-474.336 368.16zM528 368c-35.296 0-64 28.704-64 64s28.704 64 64 64 64-28.704 64-64-28.704-64-64-64zM528 464c-17.632 0-32-14.336-32-32s14.368-32 32-32 32 14.336 32 32-14.368 32-32 32zM752 368c-35.296 0-64 28.704-64 64s28.704 64 64 64 64-28.704 64-64-28.704-64-64-64zM752 464c-17.632 0-32-14.336-32-32s14.368-32 32-32 32 14.336 32 32-14.368 32-32 32zM304 371.04c-35.296 0-64 28.704-64 64s28.704 64 64 64 64-28.704 64-64-28.704-64-64-64zM304 467.04c-17.632 0-32-14.336-32-32s14.368-32 32-32 32 14.336 32 32-14.368 32-32 32z"></path>
                          </svg>
                        </template>
                      </IconText>
                    </li>
                    <li>
                      <IconText text="分享链接" @click="menuClickRouterHandler('share')">
                        <template #svg>
                          <svg class="icon" viewBox="0 0 1024 1024" width="128" height="128">
                            <path
                                d="M883.781818 106.868364a202.728727 202.728727 0 0 0-109.870545-32.302546 203.566545 203.566545 0 0 0-195.118546 262.446546L342.109091 459.170909a162.466909 162.466909 0 0 0-132.398546-68.352A163.002182 163.002182 0 1 0 209.408 716.8c46.266182 0 91.624727-19.781818 123.229091-56.32l167.191273 107.357091a135.749818 135.749818 0 0 0 242.036363 119.179636 135.796364 135.796364 0 0 0-114.152727-209.198545 135.773091 135.773091 0 0 0-104.843636 49.477818l-165.143273-106.030545a162.56 162.56 0 0 0 5.725091-120.692364l233.867636-120.669091a202.635636 202.635636 0 0 0 66.397091 69.841455 202.728727 202.728727 0 0 0 109.870546 32.302545 203.566545 203.566545 0 0 0 171.61309-93.672727 203.799273 203.799273 0 0 0-61.416727-281.506909zM209.384727 670.231273a115.828364 115.828364 0 0 1-62.743272-18.478546 116.549818 116.549818 0 0 1-35.072-160.861091 116.061091 116.061091 0 0 1 98.117818-53.550545c22.225455 0 43.915636 6.376727 62.743272 18.478545a116.549818 116.549818 0 0 1 35.072 160.861091 116.061091 116.061091 0 0 1-98.117818 53.550546z m418.280728 54.109091a89.367273 89.367273 0 0 1 74.961454 137.518545 89.041455 89.041455 0 0 1-75.240727 41.053091c-17.035636 0-33.652364-4.887273-48.104727-14.173091a88.669091 88.669091 0 0 1-38.981819-56.087273 88.645818 88.645818 0 0 1 12.101819-67.234909 89.088 89.088 0 0 1 75.264-41.076363z m278.318545-361.146182a156.695273 156.695273 0 0 1-132.445091 72.285091 156.532364 156.532364 0 0 1-84.712727-24.948364 156.183273 156.183273 0 0 1-68.654546-98.769454 156.229818 156.229818 0 0 1 21.294546-118.388364 156.695273 156.695273 0 0 1 132.445091-72.285091c30.021818 0 59.298909 8.634182 84.712727 24.925091 35.328 22.690909 59.694545 57.762909 68.654545 98.769454s1.373091 83.083636-21.294545 118.411637z"></path>
                          </svg>
                        </template>
                      </IconText>
                    </li>
                    <li>
                      <IconText text="友情链接" @click="menuClickRouterHandler('friendly')">
                        <template #svg>
                          <svg class="icon" viewBox="0 0 1024 1024" width="128" height="128">
                            <path
                                d="M894.528 150.4a195.072 195.072 0 0 0-270.912-52.288L359.424 276.992a195.072 195.072 0 0 0-52.16 270.912c56.768 83.904 167.04 108.288 254.208 60.736l-0.384-0.832c1.92-0.896 3.904-1.216 5.76-2.432a34.496 34.496 0 1 0-35.52-59.2H531.2l-0.448-0.768c-57.344 34.56-128.64 24.128-166.656-32.064a127.552 127.552 0 0 1 34.112-177.152l258.816-175.168a127.552 127.552 0 0 1 177.152 34.112c39.488 58.368 26.816 127.488-31.552 166.976l-39.488 27.52a35.392 35.392 0 1 0 39.68 58.624c0.32-0.192 0.448-0.576 0.768-0.768l38.72-26.176a195.072 195.072 0 0 0 52.224-270.912z"></path>
                            <path
                                d="M453.888 411.328l0.448 0.832c-1.92 0.896-3.968 1.28-5.76 2.56a34.496 34.496 0 1 0 36.992 58.24l0.064 0.128 0.512 0.64c56.448-35.968 128-27.264 167.424 28.032 40.96 57.344 27.584 136.96-29.76 177.92L369.28 861.184c-57.344 40.896-136.96 27.52-177.92-29.76-40.896-57.344-29.952-126.784 27.456-167.68l38.784-28.544a35.392 35.392 0 1 0-41.088-57.6c-0.32 0.192-0.448 0.576-0.768 0.768l-38.08 27.136a195.072 195.072 0 0 0 226.56 317.632l259.712-185.28a195.072 195.072 0 0 0 45.504-272.128c-58.816-82.432-169.6-104.064-255.616-54.4z"></path>
                          </svg>
                        </template>
                      </IconText>
                    </li>
                    <li>
                      <IconText text="你问我答" @click="menuClickRouterHandler('q&a')">
                        <template #svg>
                          <svg viewBox="0 0 1100 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
                            <path
                                d="M660.992 635.392l26.624 61.44h-53.248l26.624-61.44z m147.968-123.392h111.104v73.728h41.472l-35.84 53.248-5.632 9.216V882.176h-518.144V623.104h190.976l-79.872 184.832h74.24l16.384-36.864h115.712l16.384 36.864h74.24L729.088 623.104H808.96v-111.104z m-370.176-222.208h36.864v74.24h-36.864c-20.48 0-36.864-16.384-36.864-36.864s16.384-37.376 36.864-37.376z m0-73.728c-60.928 0-111.104 50.176-111.104 111.104 0 60.928 50.176 111.104 111.104 111.104h36.864v74.24h74.24V216.576h-111.104z m-259.072-74.24h555.008v407.04h-555.008v-270.848l-5.632-9.216-35.84-53.248h41.472V141.824z m-73.728-73.728V141.824h-105.984l38.4 57.856 68.096 101.888v321.024H328.192v332.8h665.6v-284.16l68.096-101.888 38.4-57.856h-105.984v-73.728h-184.832v-369.664h-703.488z"></path>
                          </svg>
                        </template>
                      </IconText>
                    </li>
                    <li>
                      <IconText text="打卡点" @click="menuClickRouterHandler('guestbook')">
                        <template #svg>
                          <svg class="icon" viewBox="0 0 1024 1024" width="200" height="200">
                            <path
                                d="M777.6 829.6c0 14.2-11.9 25.8-26.6 25.8H198.7c-14.7 0-26.6-11.6-26.6-25.8V284.3c0-14.2 11.9-25.8 26.6-25.8h354.7v-68H198.7c-52.2 0-94.6 42.1-94.6 93.8v545.3c0 51.7 42.4 93.8 94.6 93.8H751c52.2 0 94.6-42.1 94.6-93.8V478.2h-68v351.4z"></path>
                            <path
                                d="M914.4 216.3L864.2 165l-21.1-21.6-29.1-29.8c-6.4-6.5-15.2-10.2-24.3-10.2-9.2 0-17.9 3.7-24.3 10.3l-27.8 28.5-2.5 2.6-304.8 312.7c-0.4 0.4-0.8 0.8-1.2 1.3-0.4 0.5-0.8 0.9-1.2 1.4-0.1 0.1-0.1 0.2-0.2 0.3-0.3 0.4-0.6 0.8-0.9 1.3-0.1 0.1-0.1 0.2-0.2 0.3-0.3 0.5-0.6 0.9-0.9 1.4 0 0.1-0.1 0.1-0.1 0.2l-1.2 2.1-117.3 222.8c-7 13.3-4.4 29.6 6.3 40.1 6.5 6.4 15.1 9.7 23.8 9.7 5.6 0 11.3-1.4 16.5-4.3l217.7-120.5c0.1-0.1 0.3-0.2 0.4-0.2 0.4-0.2 0.7-0.4 1.1-0.7 0.2-0.1 0.4-0.3 0.6-0.4 0.3-0.2 0.6-0.4 1-0.6 0.2-0.1 0.4-0.3 0.6-0.4 0.3-0.2 0.6-0.4 0.9-0.7 0.2-0.2 0.4-0.3 0.6-0.5 0.3-0.2 0.6-0.5 0.9-0.7 0.2-0.2 0.4-0.3 0.5-0.5l0.9-0.9 0.4-0.4L870.4 309l16.3-16.7 27.8-28.5c12.8-13.2 12.8-34.3-0.1-47.5z m-92.7 45.3c-0.3 0.3-1.2 1.1-2.9 1.1-1.1 0-3.2-0.3-5.3-2.5l-42.1-43.1c-3.4-3.5-3.5-8.5-1.3-10.8l16.3-16.7c0.3-0.3 1.1-1.2 2.9-1.2 1.1 0 3.2 0.3 5.3 2.5l42.1 43.1c3.4 3.5 3.5 8.5 1.3 10.8l-1.6 1.6-14.7 15.2z m-103.5-2c1.4 1.7 2.9 3.5 4.5 5.1l42.1 43.1c2 2 4.1 3.9 6.2 5.7L554.9 535.2l-52.8-54 216.1-221.6z m-298 360l42.7-81.2 36.5 37.4-79.2 43.8z"></path>
                          </svg>
                        </template>
                      </IconText>
                    </li>
                  </ul>
                </template>
              </InfoCard>
            </template>
          </StickyPanel>
        </div>
        <!-- 内容 -->
        <div v-if="!detailLoading || details.length !== 0" class="col-10 grid p-0 ml-1"
             style="box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;  margin-top: 0.05rem; height: fit-content;">
          <div class="detail col-6  page-container" v-for="(item, index) in details" :key="index">
            <!-- 点赞、收藏 左侧栏 -->
            <div class="detail-nav col-1">
              <!-- 浏览 -->
              <div class="lg:col-2 md:col-3">
                <Button icon="pi pi-eye"
                        class="p-button-rounded p-button-help p-button-text m-view-button"
                        :badge="item.view+''"
                        disabled/>
              </div>
              <!-- 点赞 -->
              <div class="lg:col-2 md:col-3">
                <Button class="p-button-rounded p-button-text m-opera-button"
                        @click="operationDetail(item.id, 0, item.toGood)">
                  <img alt="good"
                       class="w-1rem"
                       :src="item.toGood ? 'https://cdn.yeziji.xyz/icons/forums-good-fill.png':'https://cdn.yeziji.xyz/icons/forums-good.png'"/>
                  <Badge :value="item.goodNumber"/>
                </Button>
              </div>
              <!-- 收藏 -->
              <div class="lg:col-2 md:col-3">
                <Button class="p-button-rounded p-button-help p-button-text m-opera-button"
                        @click="operationDetail(item.id, 1, item.toCollection)">
                  <img alt="collection"
                       class="w-1rem"
                       :src="item.toCollection ? 'https://cdn.yeziji.xyz/icons/forums-collection-fill.png':'https://cdn.yeziji.xyz/icons/forums-collection.png'"/>
                  <Badge :value="item.collectionNumber"/>
                </Button>
              </div>
              <!-- 评论 -->
              <div class="lg:col-2 md:col-3">
                <Button class="p-button-rounded p-button-help p-button-text m-opera-button">
                  <img alt="collection"
                       class="w-1rem"
                       src="https://cdn.yeziji.xyz/icons/forums-comment.png"/>
                  <Badge :value="item.commentNumber"/>
                </Button>
              </div>
            </div>
            <!-- 文章内容 -->
            <div class="detail-content col-11">
              <div class="grid h-full align-content-start">
                <!-- 文章标题 -->
                <div :class="item.special ? 'col-9' : 'col-12'" class="m-title m-text-overflow-ellipsis-2"
                     @click="viewDetail(item.id)">
                  {{ item.title }}
                </div>
                <div class="col-3 m-special" v-if="item.special">
                  <Tag severity="success" @click="searchSpecial(item.special)">
                    {{ item.special }}
                  </Tag>
                </div>
                <div class="m-author">
                  作者：{{ item.author }}
                </div>
                <!-- 文章简介 -->
                <div class="col-12 m-desc" :title="item.desc">
                  {{ item.desc }}
                </div>
                <!-- 文章标签和时间 -->
                <div class="col-12 flex" style="align-self: flex-end;">
                  <div class="m-tags"
                       v-for="(tag, tindex) of item.tags.split(',')"
                       @click="tagDetail(tag)"
                       :key="`${tag}-${tindex}`">
                    <i>#</i> <em>{{ tag }}</em>
                  </div>
                  <div class="m-publishTime">
                    {{ item.publishTime }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--          <Card class="mt-3 detail" v-for="(item, index) in details" :key="index">-->
          <!--            &lt;!&ndash; 文章标题 &ndash;&gt;-->
          <!--            <template #title>-->
          <!--              <div class="grid">-->
          <!--                <div :class="item.special ? 'col-6' : 'col-12'"-->
          <!--                     @click="viewDetail(item.id)"-->
          <!--                     class="m-title">-->
          <!--                  {{ item.title }}-->
          <!--                </div>-->
          <!--                <div v-if="item.special && item.special !== ''" class="col-6 m-special">-->
          <!--                  <Tag severity="success">-->
          <!--                    {{ item.special }}-->
          <!--                  </Tag>-->
          <!--                </div>-->
          <!--                <div class="col-12">-->
          <!--                  <span class="m-author">-->
          <!--                    作者：{{ item.author }}-->
          <!--                  </span>-->
          <!--                </div>-->
          <!--                <div class="col-12" v-if="item.tags && item.tags !== ''">-->
          <!--                  <Tag v-for="(tag, tindex) in item.tags.split(',')"-->
          <!--                       class="m-tags"-->
          <!--                       :class="{'ml-1':tindex !== 0}"-->
          <!--                       :key="tag + '_' + tindex"-->
          <!--                       @click="menuClickHandler(tag)">-->
          <!--                    {{ tag }}-->
          <!--                  </Tag>-->
          <!--                </div>-->
          <!--              </div>-->
          <!--            </template>-->
          <!--            &lt;!&ndash; 文章简介 &ndash;&gt;-->
          <!--            <template #content>-->
          <!--              <div class="grid">-->
          <!--                <div class="col-12">-->
          <!--                  {{ item.desc }}-->
          <!--                </div>-->
          <!--              </div>-->
          <!--            </template>-->
          <!--            &lt;!&ndash; 文章操作按钮 &ndash;&gt;-->
          <!--            <template #footer>-->
          <!--              <div class="grid">-->
          <!--                <div class="lg:col-1 md:col-0"></div>-->
          <!--                &lt;!&ndash; 浏览 &ndash;&gt;-->
          <!--                <div class="lg:col-2 md:col-3">-->
          <!--                  <Button icon="pi pi-eye"-->
          <!--                          class="p-button-rounded p-button-help p-button-text m-view-button"-->
          <!--                          :badge="item.view+''"-->
          <!--                          disabled/>-->
          <!--                </div>-->
          <!--                &lt;!&ndash; 点赞 &ndash;&gt;-->
          <!--                <div class="lg:col-2 md:col-3">-->
          <!--                  <Button class="p-button-rounded p-button-text" @click="operationDetail(item.id, 0, item.toGood)">-->
          <!--                    <img alt="good"-->
          <!--                         class="w-1rem"-->
          <!--                         :src="item.toGood ? 'https://cdn.yeziji.xyz/icons/forums-good-fill.png':'https://cdn.yeziji.xyz/icons/forums-good.png'"/>-->
          <!--                    <Badge :value="item.goodNumber"/>-->
          <!--                  </Button>-->
          <!--                </div>-->
          <!--                &lt;!&ndash; 收藏 &ndash;&gt;-->
          <!--                <div class="lg:col-2 md:col-3">-->
          <!--                  <Button class="p-button-rounded p-button-help p-button-text"-->
          <!--                          @click="operationDetail(item.id, 1, item.toCollection)">-->
          <!--                    <img alt="collection"-->
          <!--                         class="w-1rem"-->
          <!--                         :src="item.toCollection ? 'https://cdn.yeziji.xyz/icons/forums-collection-fill.png':'https://cdn.yeziji.xyz/icons/forums-collection.png'"/>-->
          <!--                    <Badge :value="item.collectionNumber"/>-->
          <!--                  </Button>-->
          <!--                </div>-->
          <!--                &lt;!&ndash; 评论 &ndash;&gt;-->
          <!--                <div class="lg:col-2 md:col-3">-->
          <!--                  <Button class="p-button-rounded p-button-help p-button-text">-->
          <!--                    <img alt="collection"-->
          <!--                         class="w-1rem"-->
          <!--                         src="https://cdn.yeziji.xyz/icons/forums-comment.png"/>-->
          <!--                    <Badge :value="item.commentNumber"/>-->
          <!--                  </Button>-->
          <!--                </div>-->
          <!--                &lt;!&ndash; 评分 &ndash;&gt;-->
          <!--                <div class="lg:col-3 md:col-4 flex align-items-center justify-content-center">-->
          <!--                  <span>-->
          <!--                    <Rating v-model="item.aveRate" @change="ratingChangeHandler($event, item.id)"/>-->
          <!--                  </span>-->
          <!--                </div>-->
          <!--              </div>-->
          <!--            </template>-->
          <!--          </Card>-->
        </div>
        <div v-else-if="detailLoading" class="col-8 flex justify-content-center">
          <ImageLoading :src="img"/>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
/** JS */
import {onMounted, onUnmounted, ref, Ref, reactive, nextTick, inject} from 'vue';
import {DetailService, ResponseResult, PaginatorResponseResult} from '@/utils/ApiRequest';
import {DetailPageInfo, DetailResponseData} from '@/interface/detail/entity/DetailEntityInterface';
import {UserOperationDetail} from '@/interface/user/entity/UserEntityInterface';
import {ScrollHandlerInfo, scrollHandler} from '@/utils/ScrollEndHandler';
import toast from '@/utils/Toast';
import {useRouter, useRoute} from 'vue-router';
import {MessageTypes} from '@/interface/websocket/entity/SocketMessage';
import SocketMessageStore from '@/interface/websocket/store/SocketMessageStore';
import UserStore from '@/interface/user/store/UserStore';
/** 组件 */
import HeaderToolBar from '@/components/toolbar/HeaderToolBar.vue';
import EasyContentDivider from '@/components/aids/EasyContentDivider.vue';
import StickyPanel from '@/components/panel/StickyPanel.vue';
import InfoCard from '@/components/card/InfoCard.vue';
import IconText from '@/components/text/IconText.vue';
import ImgTextLink from '@/components/text/ImgTextLink.vue';
import Card from 'primevue/card';
import Rating from 'primevue/rating';
import Badge from 'primevue/badge';
import Tag from 'primevue/tag';
// import ProgressSpinner from 'primevue/progressspinner';
import Avatar from 'primevue/avatar';
import AvatarGroup from 'primevue/avatargroup';
import {Message} from "@/interface/websocket/entity/SocketMessage";
import ImageLoading from '@/components/loading/ImageLoading.vue';

const img = require('../assets/yzj_loading.gif');
/** 页面 Ref */
const indexContent = ref(null);
/** 初始化参数 */
const detailService = new DetailService(),
    router = useRouter(),
    route = useRoute(),
    socketStore = new SocketMessageStore(),
    userStore = new UserStore(),
    messages: Array<(event) => void> | undefined = inject('messages');
/** 分页信息 */
let pageInfo: DetailPageInfo = reactive({
      /** 当前页码 */
      page: 1,
      /** 截取范围 */
      limit: 18,
      /** 是否为草稿 */
      tempSave: false
    }),
    /** 是否启用加载页面 */
    loadPage = ref(true),
    /** 页面的 loading 动画 */
    detailLoading = ref(false);
/** 文章列表 */
let details: Ref<DetailResponseData[]> = ref([]), recordSearch: Ref<DetailResponseData[][]> = ref([]);
/** 操作文章 */
const operationDetail = async (detailId: number, operaMode: number, opera?: boolean | number | string) => {
      let detailIndex = 0;
      for (let detail of details.value) {
        if (detail.id === detailId) {
          break;
        }
        detailIndex++;
      }
      // 拷贝数据进行为回溯数据
      const reTempDetail = {
        toGood: details.value[detailIndex].toGood,
        goodNumber: details.value[detailIndex].goodNumber,
        toCollection: details.value[detailIndex].toCollection,
        collectionNumber: details.value[detailIndex].collectionNumber,
        toRate: details.value[detailIndex].toRate,
        aveRate: details.value[detailIndex].aveRate
      };
      if (typeof opera === 'boolean') {
        // 如果 opera 是布尔值那么判断为点赞\收藏的操作
        opera = !(opera as boolean);
      } else {
        opera = opera + '';
      }
      switch (operaMode) {
        case 0:
          // 点赞
          details.value[detailIndex].goodNumber = opera ? reTempDetail.goodNumber + 1 : reTempDetail.goodNumber - 1;
          details.value[detailIndex].toGood = (opera as boolean);
          await detailService.operationDetails(({detailId: detailId, toGood: opera} as UserOperationDetail)).catch(() => {
            details.value[detailIndex].goodNumber = reTempDetail.goodNumber;
            details.value[detailIndex].toGood = reTempDetail.toGood;
          });
          break;
        case 1:
          // 收藏
          details.value[detailIndex].collectionNumber = opera ? reTempDetail.collectionNumber + 1 : reTempDetail.collectionNumber - 1;
          details.value[detailIndex].toCollection = (opera as boolean);
          await detailService.operationDetails(({
            detailId: detailId,
            toCollection: opera
          } as UserOperationDetail)).catch(() => {
            details.value[detailIndex].collectionNumber = reTempDetail.goodNumber;
            details.value[detailIndex].toCollection = reTempDetail.toGood;
          });
          break;
        case 2:
          // 评分
          await detailService.operationDetails(({
            detailId: detailId,
            toRate: Number(opera)
          } as UserOperationDetail)).catch(() => {
            details.value[detailIndex].aveRate = reTempDetail.aveRate;
          });
          break;
      }
    },
    // 评分操作
    ratingChangeHandler = (e: any, id: number) => {
      operationDetail(id, 2, e.value);
    };
/** 获取文章列表 */
const getDetailList = async (pageInfo: DetailPageInfo, refresh?: boolean) => {
  if (pageInfo.page < 0) pageInfo.page = 1;
  detailLoading.value = true;
  let res: ResponseResult<PaginatorResponseResult<DetailResponseData>> = await detailService.getIndexDetails(pageInfo),
      data;
  if ((data = res?.data) && (data.data as DetailResponseData[]).length > 0) {
    if (refresh) {
      details.value = res.data.data;
      // 返回顶部
      document.documentElement.scrollTop = 0;
    } else {
      details.value = details.value.concat(data.data);
    }
    pageInfo.totalPage = data.totalPage;
    pageInfo.total = data.total;
    recordSearch.value.push(data.data);
  } else {
    pageInfo.page -= 1;
    await nextTick(() => {
      loadPage.value = false;
      toast.error('提示提示~', '没有文章啦~憋找了。');
    });
  }
  detailLoading.value = false;
}
/** 搜索文章 */
const searchDetail = async (val) => {
      if (val.trim() !== '') {
        // 初始化 page
        pageInfo.page = 1;
        pageInfo.title = val;
        await getDetailList(pageInfo, true);
      }
    },
    /** 恢复文章 */
    replyDetail = async () => {
      if (route.query.tags && pageInfo.tags?.trim() !== '') {
        pageInfo.tags = undefined;
      }
      // 出栈
      recordSearch.value.pop();
      // 将文章返回上一次搜索的记录
      details.value = recordSearch.value[recordSearch.value.length - 1];
    },
    /** 点击标签 */
    tagDetail = async (val) => {
      await menuClickHandler(val);
    },
    /** 点击专栏 */
    searchSpecial = async (val) => {
      pageInfo.title = `#${val}`;
      await getDetailList(pageInfo, true);
      pageInfo.title = '';
    }
/** 点击左侧 menu */
const clickTags = ref('');
const menuClickHandler = async (val: string) => {
      if (val && val.trim() !== '') {
        clickTags.value = val;
        pageInfo.page = 1;
        pageInfo.tags = val;
        await getDetailList(pageInfo, true);
        delete pageInfo.tags;
      }
    },
    menuClickRouterHandler = async (val: string) => {
      await router.push({
        path: `/${val}`
      })
    }
/** 文章跳转 */
const viewDetail = (id: number) => {
  router.push({
    path: '/detail/' + id
  })
}
let isUnMounted = ref(false);
/** 页面滚动操作 */
let scrollHandlerInfo: ScrollHandlerInfo = {
      doc: document.documentElement,
      onlyDown: true,
      otherJudgements: {
        and: true,
        judgements: !detailLoading.value && loadPage.value
      },
      func: () => {
        pageInfo.page += 1;
        getDetailList(pageInfo);
      }
    },
    handleScroll = () => scrollHandler(scrollHandlerInfo);
/**
 * 统计网站当前信息
 */
let statistics = reactive({
  online: socketStore.getOnline(),
  user: userStore.getUserCount(),
  details: 0
})
// 心跳获取当前在线人数并保存至 store
if (messages) {
  messages.push((event) => {
    let msg: Message = JSON.parse(event.data);
    if (msg.type == MessageTypes.HeartType && msg.context) {
      statistics.online = Number(msg.context);
      socketStore.updateOnline(statistics.online);
    }
  })
}
onMounted(async () => {
  // 获取首页文章数据
  await getDetailList(pageInfo);
  statistics.user = await userStore.saveUserCount();
  let queryTags = route.query.tags;
  if (queryTags) {
    menuClickHandler(queryTags + '');
  }
  window.addEventListener('scroll', handleScroll, true);
});
onUnmounted(() => {
  console.log('remove scroll')
  // 切掉主页时把滚动加载 remove
  window.removeEventListener('scroll', handleScroll, true);
});
</script>

<style lang="less">
/* 关闭 button disabled 浅色样式*/
.m-view-button[disabled] {
  opacity: 1 !important;
}

.m-view-button {
  width: auto !important;
  padding: 0.75rem 1.25rem !important;
}

/* 文章样式 */
.detail {
  border: dotted #c1f1ff 1px;
  display: flex;
  max-height: 280px;
  /* 卡片头部 */

  .detail-content {
    padding: 20px 10px 20px 60px;
  }

  .m-tags:nth-last-child(2)::after {
    content: '»';
    padding: 0 0 0 7px;
    color: var(--gray-600);
  }

  .m-tags {
    cursor: pointer;
    margin: 7px;

    i {
      font-size: 14px;
      color: red;
    }

    em {
      padding: 3px;
      font-size: 16px;
      color: rgb(152, 152, 152) !important;
      font-style: normal;
      transition: background-color .15s ease-in-out, color .15s ease;
    }

    &:hover {
      em {
        background-color: red;
        color: #ffffff !important;
      }
    }
  }

  .m-publishTime {
    margin: 7px;
    color: rgb(152, 152, 152) !important;
  }

  .m-special {
    .p-tag {
      font-size: 0.85rem !important;
      cursor: pointer;
    }

    text-align: right !important;
  }

  .m-author {
    font-family: STXingkai, serif;
    font-size: 16px;
    color: #989898;
    cursor: pointer;
    font-weight: 500;
    padding: 5px;
  }

  /* 简介 */

  .p-card-content {
    color: #777
  }

  /* 文章标题 */

  .m-title {
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    height: fit-content;

    &:hover {
      color: red;
      transition: color .15s ease-in-out;
    }
  }

  /* 文章简介 */

  .m-desc {
    flex: 1 0 auto;
    margin-bottom: 1em;
    line-height: 1.65;
    color: #777;
    height: 40%;

    display: -webkit-box; /*弹性伸缩盒子*/
    -webkit-box-orient: vertical; /*垂直排列*/
    -webkit-line-clamp: 3; /*只显示6行*/
    overflow: hidden; /*溢出隐藏*/
    text-overflow: ellipsis; /*省略号代替*/
  }

  &:hover {
    background-color: wheat;
    /* 数量背景板默认为白色 */

    .p-badge {
      background-color: wheat !important;
      transition: background-color .3s ease-in-out;
    }

    transition: all .3s ease-in-out;
  }
}
</style>
